<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>

    <div class="layui-row">

        <div class="layui-col-md4 layui-col-md-offset4">
            <div class="grid-demo">
                <span>责任人：</span>
                <div id="demo2" class="xm-select-demo" style="display: inline-block;width: 300px"></div>
                <button type="button" class="layui-btn">提交</button>
            </div>
        </div>
    </div>

    <div>
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">自身团队方面</li>
                <li>供应商管理情况</li>
                <li>裕量盘点情况</li>
                <li>合理化建议</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe style="width: 100%; height: 830px;"  src="/toLayer/summary/team/0" scrolling="no" frameborder="0"></iframe>
                </div>
                <div class="layui-tab-item">
                    <iframe style="width: 100%; height: 830px;"  src="/toLayer/summary/supplier/0" scrolling="no" frameborder="0"></iframe>
                </div>
                <div class="layui-tab-item">
                    <iframe style="width: 100%; height: 830px;"  src="/toLayer/summary/margin/0" scrolling="no" frameborder="0"></iframe>
                </div>
                <div class="layui-tab-item">
                    <iframe style="width: 100%; height: 830px;"  src="/toLayer/summary/rationalization/0" scrolling="no" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>

</body>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/xm-select.js}"></script>
<script>
    layui.use(['table','xmSelect','element'], function(){
        var table = layui.table;
        var xmSelect = layui.xmSelect;
        var element = layui.element;
        var demo2 = xmSelect.render({
            el: '#demo2',
            autoRow: true,
            tree: {
                show: true,
                showFolderIcon: true,
                showLine: true,
                indent: 20,
                expandedKeys: [ -1 ],
                lazy: true,
                load: function(item, cb){
                    setTimeout(function(){
                        if(item.name.endsWith('2')){
                            return cb([]);
                        }
                        cb([
                            {name: item.name + 1, value: item.value + '1', children: [] },
                            {name: item.name + 2, value: item.value + '2', children: [] },
                        ])
                    }, 500)
                }
            },
            height: 'auto',
            data(){
                return [
                    {name: '销售员', value: -1, children: [
                            {name: '张三', value: 100, selected: true, children: []},
                            {name: '李四1', value: 2, selected: true},
                            {name: '王五1', value: 3},
                        ]},
                    {name: '奖品', value: -2, children: [
                            {name: '奖品3', value: -3, children: [
                                    {name: '苹果3', value: 14},
                                    {name: '香蕉3', value: 15},
                                    {name: '葡萄3', value: 16},
                                ]},
                            {name: '苹果2', value: 4,},
                            {name: '香蕉2', value: 5},
                            {name: '葡萄2', value: 6},
                        ]},
                ]
            }
        })

    });
</script>
</html>